<template>
  <canvas class="canvas" ref="canvas"></canvas>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const canvas = ref(null)

onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  const width = window.innerWidth * 0.8
  const height = width
  
  // 设置canvas尺寸
  canvas.value.width = width
  canvas.value.height = height
  
  // 绘制转盘背景
  const centerX = width / 2
  const centerY = height / 2
  const radius = width / 2
  
  // 绘制6个扇形区域
  const sectors = 6
  const angle = (Math.PI * 2) / sectors
  
  for (let i = 0; i < sectors; i++) {
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.arc(centerX, centerY, radius, i * angle, (i + 1) * angle)
    
    // 交替使用不同颜色
    ctx.fillStyle = i % 2 === 0 ? '#FFE9EC' : '#FFF4E8'
    ctx.fill()
    ctx.closePath()
    
    // 绘制分隔线
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.lineTo(
      centerX + Math.cos(i * angle) * radius,
      centerY + Math.sin(i * angle) * radius
    )
    ctx.strokeStyle = '#FFFFFF'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
  }
  
  // 绘制中心圆
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius * 0.15, 0, Math.PI * 2)
  ctx.fillStyle = '#FFFFFF'
  ctx.fill()
  ctx.closePath()
})
</script>

<style scoped>
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style> 